<template>
	<view :style="[navBoxStyle]">
		<view class="wlkflex no-warp" style="justify-content: space-around;">
			<view v-if="item.params.imgMode=='fixed'" v-for="(nav,index) in item.data.image" :key="index"
				@click="jump(nav.linkpath)">
				<view :style="[navInfoStyle]">
					<image :style="[navImgStyle]" v-if="item.params.mode=='img'" class="nav-img block" mode="aspectFill"
						:src="nav.url"></image>
					<view class="center nav-title" :style="'color:'+item.style.color">{{nav.title}}</view>
				</view>
			</view>
			<view v-else class="wd100">
				<u-scroll-list :indicator="false">
					<view v-for="(nav,k) in item.data.image" :style="[navInfoStyle]" :key="k"
						@click="jump(nav.linkpath)">
						<image v-if="item.params.mode=='img'" class="block" :style="[navImgStyle]" mode="aspectFill"
							:src="nav.url"></image>
						<view class="center nav-title" :style="[navTitleStyle]">{{nav.title}}</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toUrl
	} from '@/wlkutils/tools';
	export default {
		name: "wlk-nav",
		data() {
			return {
				navBoxStyle: {},
				navImgStyle: {
					width: '',
					height: ''
				},
				navTitleStyle: {
					width: '',
					height: ''
				},
				navInfoStyle: {
					width: ''
				},
			};
		},
		//属性
		props: {
			item: {
				type: Object,
				default: () => {
					return []
				}
			},
			systemInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		created: function(e) {
			this.setNavStyle();
		},
		methods: {
			setNavStyle() {
				var _self = this;
				var systemWidth = _self.systemInfo.windowWidth;
				var length = _self.item.data.image.length;
				this.navBoxStyle.backgroundColor = this.item.style.bgColor;
				if (this.item.params.imgMode == 'scroll') {
					_self.navImgStyle.width = uni.$u.addUnit(systemWidth / (_self.item.params.imgTotal - 0.8), 'px');
					_self.navInfoStyle.width = _self.navImgStyle.width;
					_self.navTitleStyle.width = _self.navImgStyle.width;
					systemWidth = systemWidth * 0.82;
					length = _self.item.params.imgTotal;
				} else {
					_self.navImgStyle.width = uni.$u.addUnit(systemWidth / length / 2, 'px');
					_self.navInfoStyle.width = _self.navImgStyle.width;
					_self.navTitleStyle.width = _self.navImgStyle.width;
				}
				_self.navImgStyle.color = this.item.style.color;
				//确定图片高度
				if (this.item.params.mode == 'img') {
					// _self.navImgStyle.height = _self.item.height;
					_self.navImgStyle.height = '42.5px';
				}
			},
			jump(path) {
				toUrl(path);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-img {
		height: 100%;
		width: 100%;
	}

	.nav-title {
		font-size: $font-base;
		padding: 10rpx 0;
		display: -webkit-box !important;
		overflow: hidden;
		text-overflow: clip;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical !important;
		white-space: nowrap;
	}
</style>